<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
</head>
<body>
  <p>line1</p>
  <p>line2</p>
  <p>line3</p>
  <p>line4</p>
  <p>line5</p>
  <p>line6</p>
  <p>line7</p>
  <p>line8</p>
  <p>line9</p>
  <p>line10</p>
  <p>line11</p>
  <p>line12</p>
  <p>line13</p>
  <p>line14</p>
  <p>line15</p>
  <p>line16</p>
  <p>line17</p>
  <p>line18</p>
  <p>line19</p>
  <p>line20</p>
  <p>line21</p>
  <p>line22</p>
  <p>line23</p>
  <p>line24</p>
  <p>line25</p>
  <p>line26</p>
  <p>line27</p>
  <p>line28</p>
  <p>line29</p>
  <p>line30</p>
  <p>line31</p>
  <p>line32</p>
  <p>line33</p>
  <p>line34</p>
  <p>line35</p>
  <p>line36</p>
  <p>line37</p>
  <p>line38</p>
  <p>line39</p>
  <p>line40</p>
  <p>line41</p>
  <p>line42</p>
  <p>line43</p>
  <p>line44</p>
  <p>line45</p>
  <p>line46</p>
  <p>line47</p>
  <p>line48</p>
  <p>line49</p>
  <p>line50</p>
  <p>line51</p>
  <p>line52</p>
  <p>line53</p>
  <p>line54</p>
  <p>line55</p>
  <p>line56</p>
  <p>line57</p>
  <p>line58</p>
  <p>line59</p>
  <p>line60</p>
  <p>line61</p>
  <p>line62</p>
  <p>line63</p>
  <p>line64</p>
  <p>line65</p>
  <p>line66</p>
  <p>line67</p>
  <p>line68</p>
  <p>line69</p>
  <p>line70</p>
  <p>line71</p>
  <p>line72</p>
  <p>line73</p>
  <p>line74</p>
  <p>line75</p>
  <p>line76</p>
  <p>line77</p>
  <p>line78</p>
  <p>line79</p>
  <p>line80</p>
  <p>line81</p>
  <p>line82</p>
  <p>line83</p>
  <p>line84</p>
  <p>line85</p>
  <p>line86</p>
  <p>line87</p>
  <p>line88</p>
  <p>line89</p>
  <p>line90</p>
  <p>line91</p>
  <p>line92</p>
  <p>line93</p>
  <p>line94</p>
  <p>line95</p>
  <p>line96</p>
  <p>line97</p>
  <p>line98</p>
  <p>line99</p>
  <p>line100</p>
 <script>
  // 节流：事件降低一定的频率触发函数
  /*
  var ind = null;
  document.addEventListener("mousemove",e=>{
    if(ind){return}
    ind = setTimeout(()=>{
      console.log(e.pageX,e.pageY)
      ind = null;
    },200)
    
  })
  */
  function throttle(fn,delay=200){
    let first = true;
    let timer = null; //定时停止id
    return function(){ //返回一个函数       
      var self = this; //sefl缓存this
      if(first){
        first = false;
        fn.apply(self,arguments)  
      }
      if(timer){return} //如果有timer说明还有定时器等待中，直接返回
      
      timer = setTimeout(()=>{ //开启定时器
        fn.apply(self,arguments) //执行fn传入this与参数
        timer = null;//清除id（ 可以重新定时）
        first = true;
      },delay)
  }
 }
//  document.addEventListener("mousemove",throttle(function(e){
//   console.log(this,e,e.pageX,e.pageY);
//  }))

 var fun = throttle(function(){
  console.log("滚动垂直：",document.documentElement.scrollTop)
 },400)
 window.addEventListener("scroll",fun)
// window.addEventListener("scroll",e=>{
//   console.log("top",document.documentElement.scrollTop)
// })


 </script>
</body>
</html>